115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { ColumnDef } from "@tanstack/react-table";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger
|
|
} from "@app/components/ui/dropdown-menu";
|
|
import { Button } from "@app/components/ui/button";
|
|
import { ArrowUpDown, MoreHorizontal } from "lucide-react";
|
|
import { PolicyDataTable } from "./PolicyDataTable";
|
|
|
|
export interface PolicyRow {
|
|
orgId: string;
|
|
roleMapping: string | null;
|
|
orgMapping: string | null;
|
|
}
|
|
|
|
type PolicyTableProps = {
|
|
policies: PolicyRow[];
|
|
onAdd: () => void;
|
|
onEdit: (row: PolicyRow) => void;
|
|
onDelete: (row: PolicyRow) => void;
|
|
};
|
|
|
|
export default function PolicyTable({
|
|
policies,
|
|
onAdd,
|
|
onEdit,
|
|
onDelete
|
|
}: PolicyTableProps) {
|
|
const columns: ColumnDef<PolicyRow>[] = [
|
|
{
|
|
id: "actions",
|
|
cell: ({ row }) => {
|
|
const policyRow = row.original;
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<span className="sr-only">
|
|
Open menu
|
|
</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() => onEdit(policyRow)}
|
|
>
|
|
Edit Policy
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onDelete(policyRow)}
|
|
>
|
|
<span className="text-red-500">
|
|
Delete Policy
|
|
</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
id: "orgId",
|
|
accessorKey: "orgId",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() =>
|
|
column.toggleSorting(column.getIsSorted() === "asc")
|
|
}
|
|
>
|
|
Organization ID
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
);
|
|
}
|
|
},
|
|
{
|
|
accessorKey: "roleMapping",
|
|
header: "Role Mapping"
|
|
},
|
|
{
|
|
accessorKey: "orgMapping",
|
|
header: "Organization Mapping"
|
|
},
|
|
{
|
|
id: "edit",
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center justify-end space-x-2">
|
|
<Button
|
|
variant="outlinePrimary"
|
|
onClick={() => onEdit(row.original)}
|
|
>
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
];
|
|
|
|
return <PolicyDataTable columns={columns} data={policies} onAdd={onAdd} />;
|
|
}
|